<template lang="">
  <div class="start">
    <img src="../assets/images/start.jpg" />
    <div class="circle" @click="toHome">
      <van-circle
        v-model="currentRate"
        :stroke-width="50"
        :color="gradientColor"
        :rate="30"
        size="40px"
        :speed="100"
        text="跳过"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      currentRate: 0,
      gradientColor: {
        '0%': '#3fecff',
        '100%': '#6149f6'
      }
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.currentRate < 100) {
        this.currentRate++
      } else {
        this.$router.push('/home')
        clearInterval(this.timer)
      }
    }, 68)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    toHome() {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less">
.start {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .circle {
    position: fixed;
    top: 0.3rem;
    right: 0.3rem;
    cursor: pointer;
    .van-circle__text {
      color: #666;
      font-size: 12px;
    }
  }
}
</style>
